<template>

  <div class="banner">
    <el-carousel  :interval="5000" arrow="always" @change="handleChange">
    <el-carousel-item v-for="item in bannerList" :key="item.id">
    </el-carousel-item>
  </el-carousel>
  </div>
</template>
<script>


export default {
  name: "banner",

  props: [],
  data() {
    return {
    };
  },
  props:{
    bannerList:{
      type:Array,
      default:()=>[]
    }},
  computed: {
   

  },
  watch: {},

  created() {     
  },

  methods: {
    handleChange(index){
      this.$emit('changeBanner',index)
    }
  },
};
</script>
<style scoped lang="less">
.banner {
  height: 100%;
  width:100%;
  /deep/ .el-carousel{
   width:100% !important;
   height:100% !important;
   
  }
  /deep/ .el-carousel__container{
     width:100% !important;
     height:100% !important;
   }
   /deep/  .el-carousel__arrow{
    background:rgba(255,255,255,0.5)

   }
   /deep/  .el-icon-arrow-right{
     font-size: 20px;
     color:#999 !important;
   }
   /deep/ .el-icon-arrow-left{
     font-size: 20px;
     color:#ccc !important;
   }
   
}
</style>
